<template>
    <el-card class="box-card3">
        <template #header>
            <div class="system-user-search mb15">
                <el-text class="mx-1 titel " size="large">登录历史</el-text>
                <el-input size="default" placeholder="请输入用户名称" style="max-width: 180px" v-model="stats.param.search"> </el-input>
                <el-button size="default" type="primary" class="ml10" @click="gettabledata">
                    <el-icon>
                        <ele-Search />
                    </el-icon>
                    查询
                </el-button>
            </div>
        </template>
        <el-table :data="stats.tableData" border style="width: 100%">
            <el-table-column type="index" label="序号" width="60"  />
            <el-table-column prop="id" label="ID"  />
          <el-table-column prop="username" label="用户" />
            <el-table-column prop="nicename" label="用户名" />
            <el-table-column prop="fromip" label="来源" />
            <el-table-column prop="login_date" label="时间" :formatter="formatDate"/>
          <el-table-column prop="resout" label="结果" show-overflow-tooltip>
            <template #default="scope">
              <div v-if="scope.row.resout" ><el-icon size="30px" color="#67c23a" ><SuccessFilled /></el-icon>登录成功 </div>
              <div v-else><el-icon size="30px" color="#f56c6c"  > <CircleCloseFilled /></el-icon>登录失败 </div>


            </template>
          </el-table-column>
        </el-table>
        <el-config-provider :locale="zhCn">
        <el-pagination style="margin-top: 25px;"
            @current-change="onHandleCurrentChange"
            :pager-count="5"
            v-model:current-page="stats.param.pageindex"
            background
            v-model:page-size="stats.param.pagesize"
            layout="total, prev, pager, next, jumper"
            :total="stats.total"
        >
        </el-pagination>
        </el-config-provider>
    </el-card>
    <UserDialog ref="userDialogRef" @refresh="gettabledata()"/>


</template>

<script lang="ts" setup>
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import {defineAsyncComponent, onMounted, reactive, ref} from "vue";
import { hisuser} from "@/api/api.js"
import { formatDate } from "@/api/tool.js"
import { ElMessageBox, ElMessage } from 'element-plus';
// 定义变量内容
const userDialogRef = ref();
interface User {
    date: string
    name: string
    address: string
}

const stats =reactive({
        tableData:[],
        total:0,
        param: {
            pageindex: 1,
            pagesize: 10,
            search:'',
        },
    })



const onHandleCurrentChange = (val: number) => {
    stats.param.pageindex = val;
    gettabledata();
};

const gettabledata= async()=>{
    let res =await hisuser(stats.param)
    stats.tableData=res.data
    stats.total=res.total
}

onMounted(() => {
    gettabledata()
});
</script>
<style>
.titel{
    font-size: 26px;
    margin-right: 26px;
}
</style>